<template>
  <div class="index_two">
    <div class="container pr">
      <div class="index_top clearfix">
        <div class="fl left clearfix">
          <span class="hot fl">HOT</span>
          <span class="hot_text fl">热门活动</span>
        </div>
        <ul class="clearfix fl w70">
          <li
            @click="tab(index)"
            v-for="(item, index) in shaixuan"
            :key="item.index"
            :class="{ active: index === actId }"
          >
            <a href="javacript:;" class="bl">{{ item.name }}</a>
          </li>
        </ul>
        <div class="fr right">
          <router-link to="/hotlist"
            >全部<i class="iconfont icon-show_more-copy"></i
          ></router-link>
        </div>
      </div>
      <div class="sum index_bot">
        <div
          v-show="index === actId"
          :key="contentsw.index"
          v-for="(contentsw, index) in contentsw"
        ><el-empty description="暂无数据" v-if="contentsw.list<=0"></el-empty>
          <swiper :options="swiperIndex" ref="mySwiper">
            <swiper-slide
              class="activity"
              v-for="(neirong, d) in contentsw.list"
              :key="d"
            >
              <div>
                <router-link :to="{path:'/hotshow',query:{id:neirong.id}}" class="bl over"
                  ><img :src="$api + neirong.image" class="w100" alt=""
                /></router-link>
                <div class="content">
                  <div class="data">
                    活动时间：{{ neirong.create_time | formatDate }}
                  </div>
                  <router-link :to="{path:'/hotshow',query:{id:neirong.id}}" class="bl name line1"
                    >{{ neirong.title }}
                  </router-link>
                  <div class="address text">
                    <i class="iconfont icon-dizhi"></i>{{ neirong.city }}
                  </div>
                  <div class="people clearfix">
                    <div class="fl clearfix">
                      <div
                        class="tx_img"
                        :style="{
                          backgroundImage:
                            'url(' + $api + neirong.user.avatar + ')',
                        }"
                      ></div>
                      <div>{{ neirong.user.nickname }}</div>
                    </div>
                    <div class="fr">
                      <i class="iconfont icon-yanjing"></i> {{ neirong.views }}
                    </div>
                  </div>
                </div>
              </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>

        </div>

      </div>
    </div>
  </div>
</template>


<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import { formatDate } from "../../assets/data.js";
export default {
  components: {
    swiper,
    swiperSlide,
  },
  // 时间戳
  filters: {
    formatDate(time) {
      time = time * 1000;
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  data() {
    return {
      swiperIndex: {
        slidesPerColumnFill: "row",
        slidesPerView: 4,
        spaceBetween: 26,
        slidesPerColumn: 2,
        observer: true,
        observeParents: true,
        breakpoints: {
          990: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          767: {
            slidesPerView: 1,
            spaceBetween: 15,
            slidesPerColumn: 1,
            pagination: {
              el: ".index_two .swiper-pagination",
              clickable: true,
            },
          },
        },
      },
      actId: 0,
      shaixuan: [],
      contentsw: [],
    };
  },
  methods: {
    tab(index) {
      this.actId = index;
    },
    getShaixuan() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/activity/hotselect")
        .then(function (response) {
          that.shaixuan = response.data.data;
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    // 热门团队
    getHotActive() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/index/hotactivity?type=")
        .then(function (response) {
          that.contentsw = response.data.data;
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
  },
  created() {
    this.getShaixuan();
    this.getHotActive();
  },
};
</script>


<style scoped>
html.active {
  overflow-y: scroll !important;
  height: auto !important;
}
.tx_img img {
  border-radius: 50%;
}
.swiper-pagination-bullet {
  width: 0.8125rem;
  height: 0.8125rem;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  background-color: #ffce45 !important;
}
.banner .swiper-pagination {
  bottom: 2.5rem;
}
.el-tabs__header {
  position: absolute;
  top: -3px;
  left: 24%;
  width: auto;
}
.el-tabs--card > .el-tabs__header .el-tabs__item,
.el-tabs--card > .el-tabs__header .el-tabs__nav,
.el-tabs--card > .el-tabs__header {
  border: none;
}
.index_top li a {
  color: #848484;
}
.index_top li,
.el-tabs__item {
  font-size: 1rem;
  line-height: 1.875rem;
  color: #848484;
  margin-left: 2.1875rem;
  padding: 0 0 0.5rem 0 !important;
  height: auto;
  position: relative;
  float: left;
}
.index_top li::before,
.tab-teamone::before,
.el-tabs__item::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #de5044;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.index_top li.active a,
.index_top li:hover a {
  color: #de5044;
}
.index_top li.active::before,
.index_top li:hover::before,
.el-tabs__item:hover::before,
.el-tabs__item.is-active::before {
  width: 100%;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
}

.index_four .el-tabs__item::before {
  background: #19a15f;
}

.index_four .el-tabs__item.is-active,
.index_four .el-tabs__item:hover {
  color: #19a15f;
}
</style>

<style lang="less" scoped>
.index_two {
  padding: 3.75rem 0;
}

.index_top {
  margin-bottom: 2.5rem;
  .w70 {
    width: 70%;
  }
  .left {
    .hot {
      width: 3.875rem;
      line-height: 2.0625rem;
      background-color: #de5044;
      border-radius: 4px 0 4px 4px;
      position: relative;
      font-size: 1rem;
      color: #ffffff;
      text-align: center;
    }

    .hot::before {
      content: "";
      position: absolute;
      top: 0;
      right: -0.5rem;
      width: 0;
      height: 0;
      border-top: 0.5rem solid #de5044;
      border-right: 0.5rem solid transparent;
    }

    .hot_text {
      font-size: 1.75rem;
      line-height: 1.75rem;
      margin-left: 0.9375rem;
    }

    ul li {
      float: left;
      font-size: 1rem;
      line-height: 1.875rem;
      color: #848484;
      margin-left: 2.1875rem;
    }

    ul li a {
      position: relative;
      padding-bottom: 0.25rem;
    }

    ul li a::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 3px;
      background: #de5044;
      transition: all 0.4s;
      -webkit-transform: all 0.4s;
      -moz-transition: all 0.4s;
      -o-transition: all 0.4s;
    }

    ul li.active,
    ul li:hover {
      a {
        color: #000;
      }

      a::before {
        width: 100%;
        transition: all 0.4s;
        -webkit-transform: all 0.4s;
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
      }
    }
  }

  .right {
    a {
      color: #848484;
    }

    font-size: 1rem;
    line-height: 2.2rem;
    .iconfont {
      font-size: 1rem;
    }
  }

  .right:hover {
    a {
      color: #4c8bf5;
    }
  }
}
.index_three {
  margin-bottom: 3.125rem;
}

.index_four .left .hot,
.list_team .left .hot,
.index_four .left ul li a::before,
.list_team .left ul li a::before {
  background-color: #19a15f;
}

.index_four .left .hot::before,
.list_team .left .hot::before {
  border-top: 0.5rem solid #19a15f;
}

.index_four .activity > div:hover,
.list_team .activity > div:hover {
  border-color: #19a15f;
}

.index_four .activity > div:hover .name,
.list_team .activity > div:hover .name,
.index_four .activity .address i,
.list_team .activity .address i {
  color: #19a15f;
}
.index_four {
  padding: 3.75rem 0;
  background-color: #f7f8fa;
}

.index_five {
  padding: 3.75rem 0;
}
.index_five .more {
  margin-top: 0.9375rem;
  background-color: #ffce45;
  border-color: #ffce45;
}

.index_five .more:hover {
  background: #fff;
}

.index_five .more:hover a {
  color: #ffce45;
}

.index_five .subtitle {
  margin-bottom: 2.5rem;
}
.index_top .left ul li a {
  color: #000 !important;
}
.story_ul li {
  margin-bottom: 1.6875rem;
}

.story_ul li > div {
  border-radius: 0.625rem;
  border: solid 1px #dedede;
  padding: 1.5625rem;
}

.story_ul li .left {
  width: 41%;
}

.story_ul li .left .img {
  height: 11.75rem;
  background-size: cover;
  background-position: center center;
  width: 100%;
}

.story_ul li .right {
  width: 59%;
  padding-left: 1.875rem;
}

.story_ul li .right .data {
  font-size: 0.875rem;
  line-height: 1.875rem;
  color: #848484;
}

.story_ul li .right .data .fr i {
  margin-right: 0.5625rem;
  font-size: 0.875rem;
}

.story_ul li .right .name {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 2rem;
  color: #000000;
}

.story_ul li:hover > div {
  box-shadow: 0px 0.4375rem 0.9375rem 0px rgba(0, 0, 0, 0.1);
  border-radius: 0.625rem;
  border: solid 1px #ffce45;
}

.story_ul li:hover > div .name {
  color: #ffce45;
}

@media (max-width:1200px) {
  .index_top li , .el-tabs__item {
    margin-left: 15px;
  }
  .index_top .left .hot_text {
    font-size: 26px;
    line-height: 30px;
  }
}
@media (max-width:990px) {
  .index_top .w70 {
    width: 100%;
    margin-top: 15px;
  }
  .index_top li:nth-child(1) {
    margin-left: 0;
  }
  .index_top {
    position: relative;
  }
  .index_top .right {
    position: absolute;
    top: 0;
    right: 0;
  }.index_top {
    margin-bottom: 15px;
  }
}


@media (max-width:767px)  {
 .index_two  .swiper-container {
    padding-bottom: 35px;
  }
  .index_two {
    padding: 25px 0;
  }
  .index_two  .swiper-pagination {
    bottom: 0;
  }
  .index_two .swiper-pagination-bullet-active {
    background: #de5044 !important;
  }
}
</style>
